/*
 * @Author: 叶敏轩 mc20000406@163.com
 * @Date: 2024-01-29 23:32:20
 * @LastEditors: 叶敏轩 mc20000406@163.com
 * @LastEditTime: 2024-01-30 01:17:57
 * @FilePath: /waterfall/src/utils.ts
 * @Description:
 */
import { reactive, render, h } from "vue";
import WaterfallItemVue from "./waterfallItem.vue";
const waterfallOption = reactive({
  hasImage: true,
});
// 计算真实高度，这里只计算除了图片的高度
function getRealHeight(item: any, realWidth: number) {
  const dom = document.createElement("div");

  render(
    h(WaterfallItemVue, {
      item: item,
      width: realWidth + "px",
      noImage: true,
    }),
    dom
  );

  document.body.appendChild(dom);

  // 获取高度
  const height: number = dom.clientHeight;
  // 移除新容器
  document.body.removeChild(dom);

  // 返回高度
  return height;
}
// 瀑布流元素高度的计算函数
const calcItemHeight = (item: any, itemWidth: number) => {
  let height = 0;
  // 当包含图文时，需要单独计算文字部分的高度
  // 文字部分的高度 + 图片的高度 = 真实高度
  if (waterfallOption.hasImage) {
    height = getRealHeight(item, itemWidth);
  }
  return item.imgHeight * (itemWidth / item.blockWidth) + height;
};
export { calcItemHeight, waterfallOption };
